            <template>
  <div class="my-articles">
    <header class="page-header">
      <h1>
        <i class="icon">📝</i>
        我的文章
      </h1>
      <p class="subtitle">管理和创作您的文章内容</p>
    </header>

    <!-- 操作栏 -->
    <div class="toolbar">
      <div class="filter-tabs">
        <button 
          :class="['filter-tab', { active: statusFilter === 0 }]"
          @click="changeStatus(0)"
        >
          <i class="icon">📝</i>
          我的草稿{{ statusFilter === 0 ? ` (${total})` : '' }}
        </button>
        <button 
          :class="['filter-tab', { active: statusFilter === 1 }]"
          @click="changeStatus(1)"
        >
          <i class="icon">⏳</i>
          待审核{{ statusFilter === 1 ? ` (${total})` : '' }}
        </button>
        <button 
          :class="['filter-tab', { active: statusFilter === 2 }]"
          @click="changeStatus(2)"
        >
          <i class="icon">✅</i>
          已通过{{ statusFilter === 2 ? ` (${total})` : '' }}
        </button>
        <button 
          :class="['filter-tab', { active: statusFilter === 3 }]"
          @click="changeStatus(3)"
        >
          <i class="icon">❌</i>
          未通过{{ statusFilter === 3 ? ` (${total})` : '' }}
        </button>
      </div>
      <button class="btn-new-article" @click="createNewArticle">
        <i class="icon">➕</i>
        新建文章
      </button>
    </div>

    <!-- 文章列表 -->
    <div v-if="!showEditor" class="articles-list">
      <div v-if="isLoading" class="loading-state">
        <div class="loading-spinner-large"></div>
        <p>加载中...</p>
      </div>

      <div v-else-if="filteredArticles.length === 0" class="empty-state">
        <i class="empty-icon">📭</i>
        <p>暂无文章</p>
        
      </div>

      <div v-else>
        <div class="article-grid">
          <div 
            v-for="article in filteredArticles" 
            :key="article.id"
            class="article-card"
          >
            <div class="article-header">
              <h3 class="article-title">{{ article.title }}</h3>
              <span :class="['status-badge', getStatusClass(article.status)]">
                {{ getStatusText(article.status) }}
              </span>
            </div>
            <p class="article-excerpt">{{ article.content ? article.content.substring(0, 50) + '...' : '暂无内容' }}</p>
            <div class="article-meta">
              <div class="meta-item">
                <i class="icon">📅</i>
                {{ formatDate(article.createTime) }}
              </div>
              <div v-if="article.status === 2" class="meta-item">
                <i class="icon">👁️</i>
                {{ article.viewCount || 0 }} 阅读
              </div>
            </div>
            <!-- 草稿状态（status=0）：编辑、删除、去审核 -->
            <div v-if="article.status === 0" class="article-actions">
              <button class="btn-action" @click="editArticle(article)">
                <i class="icon">✏️</i>
                编辑
              </button>
              <button class="btn-action btn-delete" @click="deleteArticle(article)">
                <i class="icon">🗑️</i>
                删除
              </button>
              <button class="btn-action btn-check" @click="submitCheck(article)">
                <i class="icon">✅</i>
                去审核
              </button>
            </div>

            <!-- 待审核状态（status=1）：仅撤回审核 -->
            <div v-else-if="article.status === 1" class="article-actions">
              <button class="btn-action btn-return" @click="returnCheckHandler(article)">
                <i class="icon">↩️</i>
                撤回审核
              </button>
            </div>

            <!-- 已通过状态（status=2）：仅查看 -->
            <div v-else-if="article.status === 2" class="article-actions">
              <button class="btn-action" @click="editArticle(article)">
                <i class="icon">👁️</i>
                查看
              </button>
            </div>

            <!-- 未通过状态（status=3）：编辑、删除、去审核 -->
            <div v-else-if="article.status === 3" class="article-actions">
              <button class="btn-action" @click="editArticle(article)">
                <i class="icon">✏️</i>
                编辑
              </button>
              <button class="btn-action btn-delete" @click="deleteArticle(article)">
                <i class="icon">🗑️</i>
                删除
              </button>
              <button class="btn-action btn-check" @click="submitCheck(article)">
                <i class="icon">✅</i>
                去审核
              </button>
            </div>
          </div>
        </div>

        <!-- 分页组件 -->
        <Pagination
          v-if="total > 0"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          @change="handlePageChange"
        />
      </div>
    </div>

    <!-- 文章编辑器 -->
    <div v-else class="article-editor">
      <div class="editor-header">
        <button class="btn-back" @click="closeEditor">
          <i class="icon">←</i>
          返回
        </button>
        <input 
          v-model="articleForm.title" 
          type="text" 
          class="input-title"
          placeholder="请输入文章标题..."
        />
        <button 
          v-if="!editingArticle || editingArticle.status !== 2"
          class="btn-save" 
          @click="saveArticle" 
          :disabled="isSaving"
        >
          <i class="icon" v-if="!isSaving">💾</i>
          <span class="loading-spinner" v-if="isSaving"></span>
          {{ isSaving ? '保存中...' : '保存文章' }}
        </button>
        <span v-else class="read-only-tip">
          <i class="icon">🔒</i>
          已通过的文章不可编辑
        </span>
      </div>

      <div class="editor-content">
        <RichTextEditor 
          ref="editorRef"
          v-model:content="articleForm.content"
        />
      </div>

      <!-- 审核记录展示 -->
      <div v-if="reviewRecords" class="review-records">
        <div class="review-header">
          <i class="icon">📋</i>
          <h3>审核记录</h3>
        </div>
        <div v-if="isLoadingReview" class="review-loading">
          <span class="loading-spinner"></span>
          加载审核记录中...
        </div>
        <div v-else class="review-content">
          <div class="review-item">
            <div class="review-label">审核人：</div>
            <div class="review-value">{{ reviewRecords.reviewerName || '未知' }}</div>
          </div>
          <div class="review-item">
            <div class="review-label">审核时间：</div>
            <div class="review-value">{{ formatDate(reviewRecords.reviewTime) }}</div>
          </div>
          <div class="review-item">
            <div class="review-label">审核状态：</div>
            <div class="review-value">
              <span :class="['review-status', reviewRecords.reviewStatus === 2 ? 'approved' : 'rejected']">
                {{ reviewRecords.reviewStatus === 2 ? '✅ 已通过' : '❌ 未通过' }}
              </span>
            </div>
          </div>
          <div v-if="reviewRecords.rejectReason" class="review-item full-width">
            <div class="review-label">拒绝原因：</div>
            <div class="review-comment">{{ reviewRecords.rejectReason }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import RichTextEditor from '../components/RichTextEditor.vue'
import Pagination from '../components/Pagination.vue'
import { saveDraftToWechat, updateArticle, getMyArticles, deleteArticle as deleteArticleAPI, checkArticle, returnCheck, getReviewRecords, getUserBindAccount } from '../api/article.js'
import toast from '../utils/toast.js'

const showEditor = ref(false)
const editingArticle = ref(null)
const editorRef = ref(null)
const articleForm = ref({ title: '', content: '' })
const reviewRecords = ref(null)
const isLoadingReview = ref(false)

// 绑定账号相关
const bindAccounts = ref([])
const selectedAppId = ref('')

// 从 localStorage 获取当前登录用户的 ID
const getUserId = () => {
  try {
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    return userInfo.id || null
  } catch (error) {
    console.error('获取用户ID失败:', error)
    return null
  }
}

const userId = ref(getUserId())

// 获取用户绑定的公众号账号列表
const fetchBindAccounts = async () => {
  try {
    const response = await getUserBindAccount(userId.value)
    if (response && response.code === 200 && response.data) {
      bindAccounts.value = response.data
      // 默认选中第一个账号
      if (bindAccounts.value.length > 0) {
        selectedAppId.value = bindAccounts.value[0].appId
      }
    }
  } catch (error) {
    console.error('获取绑定账号失败:', error)
    toast.error('获取绑定账号失败: ' + error.message)
  }
}

// Loading 状态
const isSaving = ref(false)
const isLoading = ref(false)

// 状态筛选 (默认显示草稿 status=0)
const statusFilter = ref(0)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(9)
const total = ref(0)

// 当前页显示的文章
const filteredArticles = ref([])

// 获取文章列表
const fetchArticles = async () => {
  isLoading.value = true
  try {
    // 直接使用 statusFilter.value 作为 status 参数 (0, 1, 2, 3)
    const response = await getMyArticles(
      currentPage.value,
      pageSize.value,
      statusFilter.value,
      userId.value
    )
    
    // 假设后端返回格式：{ data: { records: [], total: 0 } }
    if (response && response.data) {
      filteredArticles.value = response.data.records || []
      total.value = response.data.total || 0
    }
  } catch (error) {
    console.error('获取文章列表失败:', error)
    toast.error('获取文章列表失败: ' + error.message)
  } finally {
    isLoading.value = false
  }
}

// 切换状态
const changeStatus = (status) => {
  statusFilter.value = status
  currentPage.value = 1
  fetchArticles()
}

// 分页变化处理
const handlePageChange = () => {
  fetchArticles()
}

// 根据status数字返回对应的class
const getStatusClass = (status) => {
  if (status === 0) return 'draft'
  if (status === 1) return 'reviewing'
  if (status === 2) return 'published'
  if (status === 3) return 'rejected'
  return 'draft'
}

// 获取状态文本
const getStatusText = (status) => {
  if (status === 0) return '我的草稿'
  if (status === 1) return '待审核'
  if (status === 2) return '已通过'
  if (status === 3) return '未通过'
  return '我的草稿'
}

// 格式化日期（精确到分钟）
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 创建新文章
const createNewArticle = () => {
  editingArticle.value = null
  articleForm.value = { title: '', content: '' }
  showEditor.value = true
}

// 获取审核记录
const fetchReviewRecords = async (articleId) => {
  isLoadingReview.value = true
  reviewRecords.value = null
  
  try {
    const response = await getReviewRecords(articleId)
    
    if (response && response.data) {
      // data 是数组，取第一条记录（最新的审核记录）
      reviewRecords.value = Array.isArray(response.data) ? response.data[0] : response.data
      console.log('审核记录:', reviewRecords.value)
    }
  } catch (error) {
    console.error('获取审核记录失败:', error)
    // 静默失败，不影响用户编辑
  } finally {
    isLoadingReview.value = false
  }
}

// 编辑文章
const editArticle = async (article) => {
  editingArticle.value = article
  articleForm.value = { 
    title: article.title, 
    content: article.content 
  }
  showEditor.value = true
  
  // 如果是已通过(status=2)或未通过(status=3)的文章，获取审核记录
  if (article.status === 2 || article.status === 3) {
    await fetchReviewRecords(article.id)
  } else {
    reviewRecords.value = null
  }
}

// 删除文章
const deleteArticle = async (article) => {
  if (!confirm(`确定要删除《${article.title}》吗？`)) {
    return
  }

  try {
    await deleteArticleAPI(article.id)
    toast.success('文章已删除')
    
    // 重新获取文章列表
    fetchArticles()
  } catch (error) {
    console.error('删除文章失败:', error)
    toast.error('删除失败: ' + error.message)
  }
}

// 提交审核
const submitCheck = async (article) => {
  if (!confirm(`确定要提交《${article.title}》到审核吗？`)) {
    return
  }

  try {
    await checkArticle(article.id)
    toast.success('已提交审核')
    
    // 重新获取文章列表
    fetchArticles()
  } catch (error) {
    console.error('提交审核失败:', error)
    toast.error('提交审核失败: ' + error.message)
  }
}

// 撤回审核
const returnCheckHandler = async (article) => {
  if (!confirm(`确定要撤回《${article.title}》的审核吗？`)) {
    return
  }

  try {
    await returnCheck(article.id)
    toast.success('已撤回审核')
    
    // 重新获取文章列表
    fetchArticles()
  } catch (error) {
    console.error('撤回审核失败:', error)
    toast.error('撤回审核失败: ' + error.message)
  }
}

// 保存文章
const saveArticle = async () => {
  if (!articleForm.value.title.trim()) {
    toast.warning('请输入文章标题')
    return
  }
  if (!articleForm.value.content.trim()) {
    toast.warning('请输入文章内容')
    return
  }
  if (!selectedAppId.value) {
    toast.warning('请选择公众号账号')
    return
  }

  isSaving.value = true

  try {
    const finalContent = editorRef.value?.getContentWithServerUrls() || articleForm.value.content
    
    // 判断是新增还是修改
    if (editingArticle.value && editingArticle.value.id) {
      // 修改文章
      await updateArticle(
        editingArticle.value.id,
        userId.value,
        articleForm.value.title,
        finalContent,
        selectedAppId.value
      )
      toast.success('文章已更新')
    } else {
      // 新增文章
      await saveDraftToWechat(
        userId.value,
        articleForm.value.title,
        finalContent,
        selectedAppId.value
      )
      toast.success('文章已保存')
    }
    
    closeEditor(true) // 保存成功后直接关闭，不需要确认
    fetchArticles() // 重新获取列表
  } catch (error) {
    console.error('保存文章失败:', error)
    toast.error('保存失败: ' + error.message)
  } finally {
    isSaving.value = false
  }
}

// 关闭编辑器
const closeEditor = (skipConfirm = false) => {
  if (!skipConfirm && (articleForm.value.title || articleForm.value.content) && 
      !confirm('关闭编辑器将丢失未保存的内容，是否继续？')) {
    return
  }
  showEditor.value = false
  editingArticle.value = null
  articleForm.value = { title: '', content: '' }
}

// 页面加载时获取文章列表
onMounted(() => {
  // 确保有用户ID才获取文章
  if (!userId.value) {
    toast.error('未获取到用户信息，请重新登录')
    return
  }
  fetchArticles()
  fetchBindAccounts()
})
</script>

<style scoped>
.my-articles {
  padding: 30px;
  background: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.subtitle {
  color: #7f8c8d;
  font-size: 1rem;
  margin: 0;
}

.icon {
  font-style: normal;
}

.toolbar {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 10px 20px;
  border: 2px solid #e0e0e0;
  background: white;
  color: #555;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.filter-tab:hover {
  border-color: #3498db;
  color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

.filter-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-new-article {
  padding: 12px 24px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.btn-new-article:hover {
  background: #229954;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
}

.articles-list {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-state {
  text-align: center;
  padding: 60px 20px;
}

.loading-spinner-large {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 80px;
  font-style: normal;
  margin-bottom: 20px;
  display: block;
}

.empty-state p {
  color: #7f8c8d;
  font-size: 18px;
  margin-bottom: 25px;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.article-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.article-card:hover {
  border-color: #3498db;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.2);
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
}

.article-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  flex: 1;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.draft {
  background: #e3f2fd;
  color: #1565c0;
}

.status-badge.reviewing {
  background: #fff3cd;
  color: #856404;
}

.status-badge.published {
  background: #d4edda;
  color: #155724;
}

.status-badge.rejected {
  background: #f8d7da;
  color: #721c24;
}

.article-excerpt {
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.article-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #7f8c8d;
  font-size: 13px;
}

.article-actions {
  display: flex;
  gap: 10px;
}

.btn-action {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid #e0e0e0;
  background: white;
  color: #555;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.btn-action:hover {
  border-color: #3498db;
  color: #3498db;
}

.btn-action.btn-delete:hover {
  border-color: #e74c3c;
  color: #e74c3c;
}

.btn-action.btn-check {
  border-color: #3498db;
  color: #3498db;
}

.btn-action.btn-check:hover {
  background: #3498db;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-action.btn-return {
  border-color: #f39c12;
  color: #f39c12;
}

.btn-action.btn-return:hover {
  background: #f39c12;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: #3498db;
  color: white;
}

.btn-primary:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.article-editor {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.editor-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 25px;
  border-bottom: 2px solid #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-back {
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  white-space: nowrap;
}

.btn-back:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.input-title {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.9);
  color: #2c3e50;
}

.input-title:focus {
  outline: none;
  border-color: white;
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.input-title::placeholder {
  color: #adb5bd;
}

.btn-save {
  padding: 12px 24px;
  background: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #667eea;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-save:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.read-only-tip {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: #667eea;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #667eea;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 审核记录样式 */
.review-records {
  margin: 25px;
  padding: 20px;
  background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
  border-radius: 12px;
  border-left: 4px solid #f39c12;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(243, 156, 18, 0.3);
}

.review-header h3 {
  margin: 0;
  font-size: 16px;
  color: #2c3e50;
  font-weight: 600;
}

.review-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7f8c8d;
  font-size: 14px;
}

.review-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.review-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.review-item.full-width {
  grid-column: 1 / -1;
}

.review-label {
  font-size: 13px;
  color: #7f8c8d;
  font-weight: 600;
}

.review-value {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 500;
}

.review-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}

.review-status.approved {
  background: #d4edda;
  color: #155724;
}

.review-status.rejected {
  background: #f8d7da;
  color: #721c24;
}

.review-comment {
  font-size: 14px;
  color: #2c3e50;
  line-height: 1.6;
  padding: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(243, 156, 18, 0.2);
}

.editor-content {
  padding: 25px;
}

.editor-content :deep(.editor-container) {
  margin: 0;
  box-shadow: none;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .my-articles {
    padding: 80px 16px 16px;
  }

  .page-header h1 {
    font-size: 1.5rem;
  }

  .subtitle {
    font-size: 0.9rem;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

  .filter-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 5px;
  }

  .filter-tab {
    flex: 0 0 auto;
    min-width: fit-content;
    padding: 10px 16px;
    font-size: 13px;
  }

  .btn-new-article {
    width: 100%;
    justify-content: center;
  }

  .articles-list {
    padding: 16px;
  }

  .article-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .article-card {
    padding: 16px;
  }

  .article-title {
    font-size: 16px;
  }

  .article-actions {
    flex-direction: column;
  }

  .btn-action {
    width: 100%;
  }

  /* 编辑器适配 */
  .article-editor {
    margin: -80px -16px -16px;
    border-radius: 0;
  }

  .editor-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
  }

  .btn-back {
    padding: 8px 14px;
    font-size: 13px;
  }

  .input-title {
    width: 100%;
    order: 3;
    font-size: 16px;
  }

  .btn-save,
  .read-only-tip {
    margin-left: auto;
    padding: 10px 20px;
    font-size: 13px;
  }

  .editor-content {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .my-articles {
    padding: 80px 12px 12px;
  }

  .page-header h1 {
    font-size: 1.3rem;
    gap: 8px;
  }

  .filter-tab {
    padding: 8px 12px;
    font-size: 12px;
  }

  .btn-new-article {
    padding: 10px 20px;
    font-size: 14px;
  }

  .article-card {
    padding: 14px;
  }

  .article-title {
    font-size: 15px;
  }

  .article-excerpt {
    font-size: 13px;
  }

  .btn-action {
    padding: 8px 12px;
    font-size: 12px;
  }
}
</style>
